<%@page import="java.sql.Array"%>
<%@ page language="java" import="java.util.*, com.mh.commons.constants.AuthConstant" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> 
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String resourceRoot = "/common/appmobile";
request.setAttribute("ver", "20180404");
request.setAttribute("dev", false);
Map<String, String> header = (HashMap<String, String>)request.getSession().getAttribute("header");
if (null != header) {
    request.setAttribute("_userName", header.get(AuthConstant.HEADER_USERNAME));
}
%>

<!DOCTYPE html>
<html>
  <head>
      <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
      <!-- viewport 后面加上 minimal-ui 在safri 体现效果 -->
      <meta name="apple-mobile-web-app-capable" content="yes">
      <!-- 隐藏状态栏/设置状态栏颜色 -->
      <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
      <!-- uc强制竖屏 -->
      <meta name="screen-orientation" content="portrait">
      <!-- QQ强制竖屏 -->
      <meta name="x5-orientation" content="portrait">
      <title>彩票</title>
	<%--<script type="text/javascript">--%>
	   <%--var _userName = "${_userName}";--%>
	<%--</script>--%>
      <script type="text/javascript" src="./static/js/fastclick.js"></script>
      <script>
          if ('addEventListener' in document) {
              document.addEventListener('DOMContentLoaded', function() {
                  FastClick.attach(document.body);
              }, false);
          }
          if(!window.Promise) {
              document.writeln('<script src="../static/js/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
          }
      </script>

      <style type="text/css">
          body.openning  > .loading {
              position: fixed;
              width: 100%;
              top: 0px;
              height: 100%;
              left: 0px;
              background: #eaeaea;
              z-index: 9999;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              transition: all 0.4s;
              -webkit-transition: all 0.4s;
              -o-transition: all 0.4s;
              -moz-transition: all 0.4s;
          }

          body.openning  > .loading .inner {
              height: 60px;
              width: 50px;
              z-index: 10;
              opacity: 1;
              display: inline-block;
              position: relative;
              -webkit-transition: all 0.3s ease-in-out;
              transition: all 0.3s ease-in-out;
              top: 20%;
              left: 50%;
              margin-left: -25px;
          }

          body.openning  > .loading .inner > div {
              height: 100%;
              width: 7px;
              margin: 0 3px 0 0;
              background-color: #6580f3;;
              display: inline-block;
              -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
              animation: sk-stretchdelay 1.2s infinite ease-in-out;
              float: left;
          }

          body.openning  > .loading .inner .rect2 {
              -webkit-animation-delay: -1.1s;
              animation-delay: -1.1s;
          }

          body.openning  > .loading .inner .rect3 {
              -webkit-animation-delay: -1.0s;
              animation-delay: -1.0s;
          }

          body.openning  > .loading .inner .rect4 {
              -webkit-animation-delay: -0.9s;
              animation-delay: -0.9s;
          }

          body.openning  > .loading .inner .rect5 {
              -webkit-animation-delay: -0.8s;
              animation-delay: -0.8s;
          }
          .loading p{
              text-align: center;
              color: #8d7c7c;
          }
          body.text-hidden > .loading{
              left: 120%;
              bottom: 120%;
              opacity: 1;
          }
          @-webkit-keyframes sk-stretchdelay {
              0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
              20% { -webkit-transform: scaleY(1.0) }
          }

          @keyframes sk-stretchdelay {
              0%, 40%, 100% {
                  transform: scaleY(0.4);
                  -webkit-transform: scaleY(0.4);
              }  20% {
                     transform: scaleY(1.0);
                     -webkit-transform: scaleY(1.0);
                 }
          }

          @keyframes sk-bg {
              0% {
                  background: #fff;
                  opacity: 1;
              }

              100% {
                  background: #eee;
                  opacity: 0.8
              }
          }
      </style>

  </head>
  
<body class="openning">
  <div id="app"></div>

  <c:choose>
     <c:when test="${dev eq true }">
         <script type="text/javascript">
             var PAGE_START_TIME = new Date().getTime()
             var _userName = "${_userName}";
         </script>
      <script src="http://192.168.5.108:3000/bundle.js?ver=${ver }"></script>
     </c:when>
     <c:otherwise>

         <div class="loading">
             <div class="inner">
                 <div class="rect1"></div>
                 <div class="rect2"></div>
                 <div class="rect3"></div>
                 <div class="rect4"></div>
                 <div class="rect5"></div>
             </div>
             <div>
                 <p>客观请稍后</p>
                 <p>精彩内容即将呈现</p>
             </div>
         </div>
      <script type="text/javascript">
        var PAGE_START_TIME = new Date().getTime() //记录页面初始化时间
        var _userName = "${_userName}";
        var scripts = ["/dist/js/vendors.js", "/dist/js/bundle.js"];
        var crtIndex = 0;
        function finishLoad() {
            var link = document.createElement("link");
            link.href="./dist/css/styles.css?ver=${ver}";
            link.rel="stylesheet";
            document.body.appendChild(link)
        }
    
        (function loadScript(script) {
          if (crtIndex > scripts.length - 1) {
            finishLoad();
          } else {
            var html = document.createElement('script');
            html.type = 'text/javascript';
            html.src = script;
            html.onload = function () {
              crtIndex += 1;
              loadScript(scripts[crtIndex]);    
            };
            document.body.appendChild(html);
          }
    
        })(scripts[crtIndex]);
      </script>
     </c:otherwise>
    </c:choose>
  
</body>
</html>
